<template>
  <div>
    <Category :isDisabled="vc != 1"></Category>

    <el-card class="box-card attrCard">
      <div v-show="vc == 1">
        <el-button
          :disabled="!categoryStore.chooseCategory[2]"
          icon="Plus"
          type="primary"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table :data="spuList" :border="true" style="margin: 10px 0px">
          <el-table-column
            type="index"
            align="center"
            width="80"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="名称"
            prop="spuName"
            width="100"
          ></el-table-column>
          <el-table-column
            label="简介"
            prop="description"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作">
            <template #="{ row }">
              <el-button
                type="primary"
                size="small"
                icon="Plus"
                @click="addSku(row)"
                >添加SKU</el-button
              >
              <el-button
                type="warning"
                size="small"
                icon="Edit"
                @click="updateSpu(row)"
                >修改SPU</el-button
              >
              <el-button
                type="default"
                size="small"
                icon="Search"
                @click="getSku(row.id)"
                >查看SKU</el-button
              >
              <el-popconfirm
                :title="`你确定删除${row.spuName}吗`"
                @confirm="deleteSpu(row.id)"
              >
                <template #reference>
                  <el-button type="danger" size="small" icon="Delete"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="total > 0"
          v-model:current-page="pageNo"
          v-model:page-size="limit"
          :page-sizes="[3, 5, 10, 20]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="prev, pager, next, ->, sizes, jumper, total"
          :total="total"
          @size-change="reqPage()"
          @current-change="reqPage()"
        />
      </div>
      <spuForm
        ref="spuRef"
        v-show="vc == 2"
        :returnVc="returnVc"
        :spuFormMode="spuFormMode"
      ></spuForm>
      <skuForm ref="skuRef" v-show="vc == 3" @returnVc="returnVc"></skuForm>
    </el-card>
    <!-- 展示sku列表的弹出框 -->
    <el-dialog title="SKU信息" v-model="skuDialog">
      <el-table :data="skuList">
        <el-table-column label="sku名称" prop="skuName"></el-table-column>
        <el-table-column label="sku价格" prop="price"></el-table-column>
        <el-table-column label="sku重量" prop="weight"></el-table-column>
        <el-table-column label="sku图片">
          <template #="{ row }">
            <img width="200" :src="row.skuDefaultImg" :alt="row.skuName" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import skuForm from "./skuForm.vue";
import spuForm from "./spuForm.vue";
import useCategoryStore from "@/store/modules/category";
import { nextTick, onBeforeUnmount, ref, watch } from "vue";
import * as spuRequest from "@/api/product/spu";
import * as skuRequest from "@/api/product/sku";
import type { SpuResponseData, Records } from "@/api/product/spu/type";
import { ElNotification } from "element-plus";
let categoryStore = useCategoryStore();

let vc = ref<number>(1); //控制组件切换 1:spu表格,2:添加spu,3:添加sku
let spuFormMode = ref<number>(1); //控制spu修改或添加模式 1:添加 2:修改
let spuList = ref<Records>([]);
let spuRef = ref();
let skuRef = ref();
let skuList = ref<any[]>([]);
let skuDialog = ref<boolean>(false);
//分页数据初始化及功能实现
let pageNo = ref<number>(1);
let limit = ref<number>(3);
let total = ref<number>(0);
const reqPage = async () => {
  let result: SpuResponseData = await spuRequest.getPageList(
    pageNo.value,
    limit.value,
    categoryStore.chooseCategory[2],
  );
  if (result.code == 200) {
    total.value = result.data.total;
    spuList.value = result.data.records;
  }
};

//监听第三分类变化，如果有值且变化，就读取显示该分类下的spu数据
watch(
  () => categoryStore.chooseCategory[2],
  async (newVal) => {
    if (newVal) {
      reqPage();
    } else {
      //如果三级分类被清除，则清除表格及分页数据
      nextTick(() => {
        clearData();
      });
      return;
    }
  },
  { immediate: true },
);

//封装清除表格及分页数据
const clearData = () => {
  spuList.value = [];
  pageNo.value = 1;
  limit.value = 3;
  total.value = 0;
};

//添加spu
const addSpu = () => {
  // 调用子组件内方法通知其清空数据
  spuRef.value.resetSpuData();
  vc.value = 2;
  spuFormMode.value = 1;
};
//修改spu
const updateSpu = (row: any) => {
  // 调用子组件内方法通知其获取数据
  spuRef.value.getSpuData(row);
  vc.value = 2;
  spuFormMode.value = 2;
};
//删除spu
const deleteSpu = async (id: number) => {
  let result = await spuRequest.deleteSpu(id);
  if (result.code == 200) {
    ElNotification.success("删除成功");
    reqPage();
  }
};

//添加sku
const addSku = (spu: any) => {
  vc.value = 3;
  skuRef.value.skuFormInit(spu);
};
//查看sku
const getSku = async (spuId: number) => {
  let result = await skuRequest.reqfindBySpuId(spuId);
  if (result.code == 200) {
    skuList.value = result.data;
    skuDialog.value = true;
  }
};

//自定义事件：子组件返回index
const returnVc = () => {
  reqPage();
  vc.value = 1;
};

//组件销毁，仓库清空
onBeforeUnmount(() => {
  categoryStore.$reset();
});
</script>

<style scoped>
.attrCard {
  margin-top: 10px;
}
</style>
